<meta charset="UTF-8"/>
<meta name="viewport"
      content="width=device-width,minimum-scale=1.0,
      maximum-scale=1.0,user-scalable=no">
<style>
   *{
   padding:0px;
   margin:0px;
    }
    body{background:#efefef;}





    .h1{ 
      margin-right:5px;
      margin-top:15px;
      margin-bottom:15px;
      width:100%;
      display:flex;
      }
.toptxt{
        width:56%;
        text-align: right;
        font-weight:bold;
        margin-bottom:5px;
        padding-top:5px;
    }
.topimg{
       width:45%;
       text-align:right;
       }
 .h2{
        display:flex;
        align-items: center;
        background:white;
        padding:5px;
        border-radius:5px;
        margin:0px 5px;
    }
    .ss{
        width:48%;
        text-align:right;
    }
   .sstxt{
        font-size:10px;
    }








   .list_item{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background:white;
        padding:10px;
        position:relative;
    }
    .pictxt{
        display: flex;
        align-items: center;
    }
    .pictxt img{
        margin-left:20px;
    }
    .list .txt{
        margin-left:20px;
    }

    .line{
        width:95%;
        height:1px;
        background:#efefef;
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .list{
        margin-top:10px;
        margin-bottom:10px;
    }
   .zm{
        align-items:center;                          
        font-size:15px;
        }
  .wz{
        text-align:center;
       }




  .tabbar{ 
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;background:white;padding-top:5px;}
  .tab{padding-bottom:5px;width:25%;font-size:12px;text-align:center;position:relative;}
  .tabbar .txt{margin-top:2px;}
  .notice1{position:absolute;left:52%;top:-1px;width:20px;height:20px;line-height:20px;text-align:center;color:white;font-size:10px;background:red;border-radius:50%}
  .notice3{position:absolute;left:52%;top:0px;width:14px;height:14px;line-height:14px;text-align:center;background:red;border-radius:50%}
</style>
<div class="all">
<!-- 头部 -->
    <div class="top">
        <div class="h1">
              <div class="toptxt">通讯录</div>
              <div class="topimg">
                     <img  src="../img/jhy.png"  width="28px" />
             </div>
        </div>
        <div class="h2">
                    <div class="ss">
                    <img src="../img/fdj.png" width="20px" />
                    </div>
                    <div class="sstxt">搜索</div>         
        </div>      
</div>
<!-- 头部 -->
<!-- 列表 -->
<div class="item_list">
     
        <div class="list1 list">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="../img/新的朋友.png" width="30" />
                    <div class="txt">新的朋友</div>
                </div>
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                   <img src="../img/群聊.png" width="30" />
                   <div class="txt">群聊</div>
                </div>
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="../img/标签.png" width="30" />
                    <div class="txt">标签</div>
                </div>
            </div>
            <div class="list_item">

                <div class="pictxt">
                    <img src="../img/公众号.png" width="30" />
                    <div class="txt">公众号</div>
                </div>
            </div>
        </div>

       <div class="list2 list">
            <div class="zm">A</div>
            <div class="list_item">
                <div class="pictxt">
                     <img src="../img/tx1.png" width="30" />
                     <div class="txt">阿明</div>
                </div>
            </div>
        </div>

        <div class="list3 list">
            <div class="zm">B</div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                   <img src="../img/tx2.png" width="30" />
                    <div class="txt">白明</div>
                </div>
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                    <img src="../img/tx3.png" width="30" />
                    <div class="txt">博明</div>
                </div>
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
                   <img src="../img/tx4.png" width="30" />
                    <div class="txt">贝贝</div>
                </div>
            </div>
        </div>
    </div>
          <div class="wz"> 4位朋友及联系人</div>
    </div>
<!-- 列表 -->
<!-- 底部导航 -->
    <div class="tabbar">
          <div class="tab">
          <a href="index.html">    <img src="../img/wx.png"  width="28" /></a>
              <div class="txt">微信</div>
              <div class="notice1">5</div>
          </div>
          <div class="tab">
              <img src="../img/txl.png"  width="28" />
              <div class="txt">通讯录</div>  
          </div>
          <div class="tab">
      <a href="panyan.html">      <img src="../img/fx.png"  width="28" /> </a>  
              <div class="txt">发现</div>
              <div class="notice3"></div>
          </div>
          <div class="tab">
       <a href="My.html">       <img src="../img/my.png"  width="28" /> </a>
              <div class="txt">我</div>
          </div>
    </div>
    <!-- 底部导航 -->
</div>